import CSelectFormItem from '@/components/CSelectFormItem/CSelectFormItem'
import useEffectDictPage from '@/useEffect/useEffectDictPage'
import useEffectUserPage from '@/useEffect/useEffectUserPage'
import { Form } from '@douyinfe/semi-ui'
import { OptionProps } from '@douyinfe/semi-ui/lib/es/select'

export const onlineType: OptionProps[] = [
  { label: '在线', value: 1 },
  { label: '隐身', value: 2 },
]

// 获取 下拉选的数据
export function getOnlineUserSearchFormSelectData(modalVisible: boolean) {
  const { dictList } = useEffectDictPage(modalVisible, 'request_category')
  const { userList } = useEffectUserPage(modalVisible, true)
  return { dictList, userList }
}

interface IOnlineUserSearchFormItem {
  userList: OptionProps[]
  dictList: OptionProps[]
}

export default function OnlineUserSearchFormItem(
  props: IOnlineUserSearchFormItem
) {
  return (
    <>
      <Form.Input field="id" showClear label="socketId" />
      <CSelectFormItem
        field={'userId'}
        label={'用户名'}
        optionList={props.userList}
      />
      <Form.Input field="ip" showClear label="ip" />
      <Form.Input field="region" showClear label="ip区域" />
      <Form.Input field="browser" showClear label="浏览器" />
      <Form.Input field="os" showClear label="操作系统" />
      <CSelectFormItem field={'mobileFlag'} label={'移动端网页'} />
      <CSelectFormItem field={'type'} label={'状态'} optionList={onlineType} />
      <Form.Input field="server" showClear label="服务器" />
      <CSelectFormItem
        field={'category'}
        label={'类别'}
        optionList={props.dictList}
      />
    </>
  )
}
